<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#msg{ margin: 50px; font-size: 36px; }
			.btnstyle{ margin: 0px 0px 0px 50px; }
		</style>
	</head>
	<body>
		<div id="msg">0</div>
		
		<div class="btnstyle">
			<button id="btnStart" onclick="start();">开始计时</button>
			<button id="btnStop" onclick="stop();">结束计时</button>
		</div>
	</body>
	
	<script>
		var count = 0;		//总的计时
		var timer;			//定时器
		var clickStart = 1;	//是否开始，标识
		
		//获得按钮对象
		var btnStart = document.getElementById("btnStart");
		var msg = document.getElementById("msg");
		
		//点击开始，计时定时刷新+n，按钮名称：暂停计时
		function start(){
			if(clickStart %2 != 0){	//第一次点击按钮，创建定时器
				timer = setInterval(function(){		//匿名函数
					count = count+1;	//每10毫秒，自增
					msg.innerText = count;
				},10);
				clickStart++;
				
				btnStart.innerText = '暂停计时';
			}else{	//第二次点击按钮，清除定时器
				clearInterval(timer);
				clickStart = 1;
				btnStart.innerText = '开始计时';
			}
			
		}
		
		//点击结束，清除定时器，总值=0，按钮名称：开始计时
		function stop(){
			count = 0;
			msg.innerText = count;
			clearInterval(timer);	//清除定时器
			btnStart.innerText = "开始计时";
		}
	</script>
</html>
